<!-- 充电桩管理 -->
<template>
  <div class="appointment-manage">
    <div class="page-header">
      <i class="el-icon-time"></i>
      <span>充电桩管理</span>
    </div>

    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="请输入关键字搜索"
        class="search-input"
        clearable
        prefix-icon="el-icon-search"
        @clear="handleSearch"
        @keyup.enter.native="handleSearch"
      >
      </el-input>
      <div class="button-group">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="handleSearch">查询</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete" :disabled="!selectedRows.length">删除</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="appointmentNo" label="预约编号" min-width="140" align="center"></el-table-column>
      <el-table-column prop="stationName" label="充电站名称" min-width="180" align="center"></el-table-column>
      <el-table-column prop="chargingPileNo" label="充电桩编号" min-width="180" align="center"></el-table-column>
      <el-table-column prop="duration" label="预约时长" min-width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.duration }}h
        </template>
      </el-table-column>
      <el-table-column prop="appointmentTime" label="预约开始时间" min-width="160" align="center"></el-table-column>
      <el-table-column prop="userName" label="预约客户" min-width="120" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)">取消</el-button>
          <el-button type="text" size="small" icon="el-icon-finished" @click="handleComplete(scope.row)">完成</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppointmentManage',
  data() {
    return {
      searchQuery: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: [],
      loading: false
    }
  },
  methods: {
    getStatusType(status) {
      const types = {
        '已完成': 'success',
        '进行中': 'warning',
        '已取消': 'info',
        '已预约': 'primary'
      }
      return types[status] || 'info'
    },
    handleSearch() {
      // 搜索功能待实现
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleAdd() {
      // 新增功能待实现
    },
    handleView(row) {
      // 查看功能待实现
    },
    handleEdit(row) {
      // 编辑功能待实现
    },
    handleDelete(row) {
      this.$confirm('确认取消该预约记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 取消功能待实现
      }).catch(() => {});
    },
    handleBatchDelete() {
      if (!this.selectedRows.length) return;
      this.$confirm(`确认取消选中的 ${this.selectedRows.length} 条预约记录吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 批量取消功能待实现
      }).catch(() => {});
    },
    handleComplete(row) {
      this.$confirm('确认完成该预约吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        // 完成功能待实现
      }).catch(() => {});
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.handleSearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleSearch();
    }
  }
}
</script>

<style scoped>
.appointment-manage {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.page-header i {
  font-size: 24px;
  margin-right: 10px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 300px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  margin-top: 15px;
}

:deep(.el-button--text) {
  padding: 0 8px;
}

:deep(.el-button--text + .el-button--text) {
  margin-left: 0;
}

:deep(.el-tag) {
  text-transform: uppercase;
}
</style>
